<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script>
            $(function() {

                $("#lookfor").on("click", function() {
                    $.get("lookfor.php?num=" + $("#num").val(), function(data) {
                        $("#text").html(data);
                    })
                })
                $("#deletefor").on("click", function() {
                    $.post("delete.php", {
                        num: $("#num").val()
                    }, function(data) {
                        $("#text").html(data);
                    })
                })

                $("#add").on("click", function() {
                    $(".mydiv1").css("display", "none");
                    $(".mydiv2").css("display", "block");
                })
                $("#add2").on("click", function() {
                    $.post("add.php", {
                        name: $("#name").val(),
                        age: $("#age").val()
                    }, function(data) {
                        $("#txt2").html(data);
                    })
                })
                $("#close").on("click", function() {
                    $(".mydiv2").css("display", "none");
                    $(".mydiv1").css("display", "block");
                })
                $("#close2").on("click", function() {
                    $(".mydiv3").css("display", "none");
                    $(".mydiv1").css("display", "block");
                })
                $("#update").on("click", function() {
                    $.get("updatelookfor.php?num=" + $("#num").val(), function(data) {
                        var pat = /id/;
                        var str = " ";
                        if(data.match(pat)) {
                            data = JSON.parse(data);
                            for(x in data) {
                                str += x + " : " + data[x] + "<br>";
                            }
                            $("#txt3").html(str);
                            $("#num3").val(data.id);
                            $("#name3").val(data.name);
                            $("#age3").val(data.age);
                            $(".mydiv1").css("display", "none");
                            $(".mydiv3").css("display", "block");
                        } else {
                            $("#text").html(data);
                        }
                    })
                })

                $("#upd").on("click", function() {
                    $.post("update.php", {
                        "num": $("#num3").val(),
                        "name": $("#name3").val(),
                        "age": $("#age3").val()
                    }, function(data) {
                        $("#txt3").html(data);
                    });
                })
            })
        </script>
        <style>
            .mydiv2 {
                display: none;
                background: rgba(255, 230, 0, 0.1);
                width: 400px;
                height: 300px;
                text-align: center;
                position: absolute;
            }
            
            .mydiv3 {
                display: none;
                background: rgba(255, 230, 0, 0.1);
                width: 400px;
                height: 300px;
                text-align: center;
                position: absolute;
                top: 0;
            }
            
            .main {
                height: 500px;
                width: 500px;
                position: absolute;
                margin-left: 30%;
                margin-top: 100px;
            }
            
            #num3 {
                border: 0px;
                background: rgba(255, 230, 0, 0.01);
            }
        </style>
    </head>

    <body>
        <div class="main">
            <div class="mydiv1">
                学号:
                <input type="text" id="num" value="" />
                <button id="lookfor">查询</button>
                <button id="deletefor">删除</button>
                <button id="add">添加</button>
                <button id="update">更新</button>
                <p>您查询的记录为:<br><span id="text"></span></p>
            </div>
            <div class="mydiv2">
                <br /><br /> 姓名:
                <input type="text" id="name" value="" /><br /> 年龄:
                <input type="text" id="age" value="" /><br />
                <button id="add2">添加</button>
                <button id="close">关闭</button>
                <p>添加状态:<span id="txt2"></span></p>
            </div>
            <div class="mydiv3">
                <br /><br /> 学号:
                <input type="text" id="num3" value="" disabled="disabled" /><br /> 姓名:
                <input type="text" id="name3" value="" /><br /> 年龄:
                <input type="text" id="age3" value="" /><br />
                <button id="upd">更新</button>
                <button id="close2">关闭</button>
                <p>更新状态:<span id="txt3"></span></p>
            </div>
        </div>
    </body>

</html>